<template>
  <div class="classification">
    <div class="classification_header">
      <div class="title">
        <router-link to="/" tag="i">
          <i class="iconfont icon-fanhui"></i>
          <span>游戏</span>
        </router-link>
        <input type="text" value="55">
        <i class="iconfont icon-xiazai"></i>
      </div>
    </div>
    <div class="hot">
      <div class="banner">
        <img src="../../assets/img/hot.png" alt>
        <div class="title">
          <img src="../../assets/img/hotTitle.png" alt>
        </div>
        <ul>
          <li v-for="(hot,index) in hotArr" :key="index">
            <img :src="hot.img" alt>
            <span class="name">{{hot.name}}</span>
            <div class="num">
              <span class="person">{{hot.person}}万人玩</span>
              <span class="bm">{{hot.bm}}BM</span>
            </div>

            <div v-if="hot.isDownload" class="btn dk">打开</div>
            <div v-else class="btn hq">获取</div>
          </li>
        </ul>
      </div>
    </div>
    <div class="content">
      <type-list :gameListArr="gameListArr"/>
    </div>
  </div>
</template>
<script>
import typeList from "./com/typeList";
export default {
  name: "hostList",
  data() {
    return {
      gameListArr: [
        {
          img: require("../../assets/img/003.png"),
          name: "绝地求生-刺激战场",
          nnt: "1.2",
          mb: "32.5",
          hot: "热门一个游戏，进来组队玩一把......"
        },
        {
          img: require("../../assets/img/003.png"),
          name: "绝地求生-刺激战场",
          nnt: "1.2",
          mb: "32.5",
          hot: "热门一个游戏，进来组队玩一把......"
        }
      ],
      hotArr: [
        {
          img: require("../../assets/img/003.png"),
          name: "漫威：未来之战",
          person: "21",
          bm: " 2.5",
          isDownload: false
        },
        {
          img: require("../../assets/img/004.png"),
          name: "漫威：未来之战",
          person: "12.3",
          bm: " 21",
          isDownload: false
        },
        {
          img: require("../../assets/img/004.png"),
          name: "漫威：未来之战",
          person: "32",
          bm: " 21",
          isDownload: false
        }
      ]
    };
  },
  components: {
    typeList
  }
};
</script>
<style lang="stylus" scoped>
.classification {
  .classification_header {
    height: 2.33rem;
    background: linear-gradient(90deg, rgba(0, 174, 255, 1), rgba(0, 180, 255, 1), rgba(0, 120, 255, 1));
    padding-top: 0.69rem;
    box-sizing: border-box;

    .title {
      color: #fff;
      font-size: 14px;
      padding: 0 10px;
      box-sizing: border-box;
      height: 0.51rem;
      line-height: 0.51rem;
      margin-bottom: 0.35rem;

      input {
        width: 4.36rem;
        height: 100%;
        border-radius: 5px;
        margin: 0 0.5rem 0 0.35rem;
        padding-left: 20px;
      }
    }
  }

  .hot {
    width: 7.1rem;
    height: 5.15rem;
    background: #FFF;
    border-radius: 0.2rem;
    margin: 0 auto;
    position: relative;
    top: -30px;
    box-sizing: border-box;
    padding: 5px 0;

    .banner {
      width: 6.86rem;
      height: 1.7rem;
      margin: 0 auto;
      position: relative;

      img {
        width: 100%;
        height: 100%;
      }

      .title {
        width: 3.36rem;
        height: 0.98rem;
        position: absolute;
        left: 50%;
        top: 0;
        transform: translateX(-50%);
      }

      ul {
        display: flex;

        li {
          flex: 1;
          display: flex;
          flex-direction: column;
          text-align: center;
          align-items: center;
          padding-top: 10px;
          box-sizing: border-box;

          img {
            width: 1.33rem;
            height: 1.34rem;
          }

          .name {
            font-size: 13px;
            margin: 5px 0;
          }

          .num {
            font-size: 10px;
            margin: 5px 0;
            display: flex;

            .person {
              color: #EF8F2C;
            }

            .bm {
              color: #90D014;
            }
          }

          .btn {
            width: 1.51rem;
            height: 0.53rem;
            line-height: 0.53rem;
            border-radius: 15px;
            text-align: center;
            margin-top: 10px;
          }

          .hq {
            background: #E8E8E8;
            color: #1089FF;
          }

          .dk {
            background: #1089FF;
            color: #E8E8E8;
          }
        }

        li:nth-child(2) {
          position: relative;
          top: -20px;
          background: #fff;
          border-radius: 10px;
        }
      }
    }
  }

  .content {
    position: relative;
    top: -20px;
    width: 7.1rem;
    margin: 0 auto;
  }
}
</style>
